import MyTable from "@/components/MyTable";
import SearchHeader from "@/components/SearchHeader";
import useTable from "@/hooks/useTable";
import { Button, Form, Popconfirm, message } from "antd";
import { useMemo } from "react";
import { useConfig } from "./form.config";
import Add from "./Add";
import { useBoolean, useRequest } from "ahooks";
import ButtonGroup from "@/components/ButtonGroup";
import { DftStatusEnum } from "@/constants/enum";
import { changeDftStatus, getDftPage } from "@/services/dft";

export default () => {
  const config = useConfig();
  const [form] = Form.useForm();
  const [open, { toggle: toggleOpen }] = useBoolean(false);

  const { tableProps, reset, submit, refresh } = useTable(getDftPage, {
    defaultFormValues: {},
    form: form,
  });
  const { run: editStatus } = useRequest(changeDftStatus, {
    manual: true,
    onSuccess: () => {
      message.success("修改状态成功");
      refresh();
    },
  });

  const columns = useMemo(() => {
    return [
      {
        title: "清洁人员",
        dataIndex: "disinfector",
      },
      {
        title: "房间号",
        dataIndex: "roomNum",
      },
      {
        title: "打扫客房状态",
        dataIndex: "disinfectingStatus",
        render: (r: any) => DftStatusEnum[r],
      },
      {
        title: "打扫客房时间",
        dataIndex: "disinfectingTime",
      },

      {
        title: "操作",
        dataIndex: "action",
        align: "center",
        render: (_: any, record: any) => {
          const { roomDisinfectingRecordsId, disinfectingStatus } = record;
          return (
            <ButtonGroup>
              {disinfectingStatus === 0 && (
                <Popconfirm
                  placement="topLeft"
                  title={"确认已打扫吗？"}
                  okText="确认"
                  cancelText="取消"
                  onConfirm={() =>
                    editStatus({
                      roomDisinfectingRecordsId,
                      disinfectingStatus: 1,
                    })
                  }
                >
                  <Button type="link">修改打扫状态</Button>
                </Popconfirm>
              )}
            </ButtonGroup>
          );
        },
      },
    ];
  }, []);

  return (
    <>
      <div style={{ marginBottom: "16px" }}>
        <SearchHeader
          configs={config}
          form={form}
          onSubmit={submit}
          onReset={reset}
        />
      </div>

      <MyTable
        top={
          <div>
            <Button onClick={() => toggleOpen()} type="primary">
              新增打扫客房记录
            </Button>
          </div>
        }
        rowKey={"roomDisinfectingRecordsId"}
        columns={columns}
        {...tableProps}
      />
      <Add open={open} refresh={refresh} close={() => toggleOpen()} />
    </>
  );
};
